<template>
  <div class="yxp-course">
    <div class="yxp-composition-top">
      <div class="back" @click="handleBack">
        <span></span>
      </div>
      <div class="yxp-top-c">文字表达训练</div>
      <div class="yxp-top-r">
        <span class="right-text-item" v-for="(item,i) in modelArr"  :key="'n' + i" @click="handleChangeModel(i)">{{item}}</span>
      </div>
    </div>
    <div class="yxp-scene-main">
      <div class="main-box">
        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap upload-box">
              <h3 class="work-title">【写作要求】</h3>
              <div class="work-info" v-html="content.require" v-if="workIndex === 0"></div>
              <div class="work-info" v-html="content.imitation_require" v-if="workIndex === 1"></div>
            </div>
          </div>
        </div>
        <div class="main-box-content">
          <div class="content">
            <div class="content-wrap  upload-wrap">
              <div class="upload-pic">
                <div class="upload" id="yxp-upload-index" @click="handleCode">
                  <img src="@/assets/composition/upload-icon.png" class="upload-icon"/>
                  <p class="tips">上传手写作文</p>
                </div>
              </div>
              <div class="foot-content">
                <div class="class-box">
                    <div class="class-box-l">课后作业：</div>
                    <div class="class-box-r">
                        <div class="class-box-r-item" :class="{checked: workIndex === i}" v-for="(item,i) in workArr" :key="i"  @click="handleChangeWork(i)">
                          <div class="dot"><span></span></div>{{item}}
                        </div>
                    </div>
                </div>
                <div class="btn" id="yxp-upload-end" @click="handleEnd">结束训练</div>
                </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mark" v-if="isShow || isPoint || isModel" @click="isShow = false"></div>
    <readPop :isPoint="isPoint" :content="content.analysis" @point="handlePoint" />
    <model :isModel="isModel" :enHead="enHead" :enEnd="enEnd" :articleType="articleType" :enWord="enText" @model="handleModel" />
    <BackTips title="是否退出学习？" :isBack="isBack" :courseId="courseId" :courseType="course_type" type="1" @close="handleClosed"/>
    <div class="yxp-upload-code" v-if="isShow">
      <img src="@/assets/composition/upload-close.png" class="close" id="yxp-upload-close" @click="isShow = false" />
      <div class="code">
        <img :src="codePath" />
      </div>
    </div>
    <Timetips ref="timetips"></Timetips>
  </div>
</template>
<script>
import readPop from '../components/readPop.vue'
import model from '../components/model.vue'
import BackTips from '../components/BackTips.vue'
import Timetips from '@/components/Timetips.vue'
import storage from '@/utils/storage.js'
import { createQrcode, getChropath, subEssay } from '@/services/composition.js'
export default {
  name: 'uploadIndex',
  components: {
    model,
    readPop,
    BackTips,
    Timetips
  },
  data () {
    return {
      title: '英语习得与切片训练',
      modelArr: ['要点解读','查看模型'],
      workArr: ['重复训练','仿写训练'],
      workIndex: 0,
      model: 0,
      id: 0,
      courseId: '',
      course_type: 0,
      content: '',
      enText: [],
      enHead: '',
      enEnd: '',
      iNow: -1,
      iStep: -1,
      isShow: false,
      isBack: false,
      isOpen: false,
      isNext: false,
      isPoint: false,
      isModel: false,
      popTitle: '开始格式塔全文还原训练吧~',
      isEn: false,
      articleType: 0
    }
  },
  created () {
    if (this.$route.query.id) {
      let { id, courseId, course_type } = this.$route.query
      this.id = +id
      this.courseId = +courseId
      this.course_type = +course_type
    }
    let data = storage.get('sceneData')
    if (data) {
      this.content = data
      this.articleType = data.type
      let enText = data.sentence
      let enArr = []
      enText.map(item =>{
        let obj = {}
        let val = ''
        if (item.indexOf('&&') !== -1 && item.indexOf('##') !== -1) {
          let val1 = item.replace('&&', '')
          console.log(val1)
          val = val1.replace('##','<br>')
          obj.word = val
          obj.isStart = 0
          enArr.push(obj)
        } else if (item.indexOf('&&') !== -1) {
          val = item.replace('&&', '')
          obj.word = val
          obj.isStart = 0
          enArr.push(obj)
        } else if (item.indexOf('##') !== -1) {
          val = item.replace('##','<br>')
          obj.word = val
          obj.isStart = 1
          enArr.push(obj)
        } else {
          val = item
          obj.word = val
          obj.isStart = 2
          enArr.push(obj)
        }
      })
      this.enText = enArr
    }
  },
  methods: {
    handleChangeModel (i) {
      this.model = i
      if (i === 0) {
        this.isPoint = true
      } else {
        this.isModel = true
      }
    },
    handleCode () {
      this.getCode()
    },
    handleEnd () {
      // this.$router.push({
      //     path: 'uploadResult',
      //     query: {
      //       id: this.id,
      //       courseId: this.courseId,
      //       course_type: this.course_type
      //     }
      //   })
      this.getPic()
    },
    //获取tup
    async getPic () {
      let data = await getChropath({ essay_id: this.id })
        if (data.code === 1) {
          if (data.data.path === '') {
            this.$toast('未上传作文图片，请确认手机端是否上传成功')
            return
          }
          this.endCourse(data.data.path)
        }
    },
    //结束学习
    async endCourse (path) {
      let params = {
        essay_id: +this.id,
        curr_id: +this.courseId,
        type: this.workIndex.toString(),
        path: path
      }
      let data = await subEssay(params)
      if (data.code === 1) {
        this.$router.push({
          path: 'uploadResult',
          query: {
            id: data.data,
            courseId: this.courseId,
            course_type: this.course_type,
            modal: 0
          }
        })
      }
    },
    // 获取二维码
    async getCode () {
      this.$loading.show()
      let data = await createQrcode({ essay_id: this.id })
      if (data.code === 1) {
        this.$loading.hide()
        this.codePath = data.data.path
        this.isShow = true
      } else if (data.code === 10001 || data.code === '10001') {
        this.$loading.hide()
        this.$toast('token过期，请重新登录')
      } else {
        this.$loading.hide()
        this.$toast(data.info)
      }
    },
    // 切换work
    handleChangeWork (i) {
      this.workIndex = i
    },
    handlePoint (val) {
      this.isPoint = val
    },
    handleModel (val) {
      this.isModel = val
    },
    handleBack () {
      this.isBack = true
    },
    handleClosed (val) {
      this.isBack = val
    }
  },
  beforeDestroy() {
    this.$refs.timetips.stopTimer();
    this.$refs.timetips.stopEndTimer();
  },
}
</script>
<style lang='less' scoped>
.yxp-composition-top {
    .yxp-top-r {
      color: #27BFA3;
      font-size: 20px;
      font-family: Microsoft YaHei;
      font-weight: 400;
      .right-text-item {
        cursor: pointer;
        &:last-child {
          margin-left: 60px;
        }
      }
    }
  }
.upload-wrap {
  height: calc(100% - 153px) !important;
  padding: 0 !important;
}
  .upload-box {
    .work-title {
      padding-top:2px !important;
    }
  }
.foot-content {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  height: 165px;
  z-index: 10;
  .class-box {
    display: flex;
    justify-content: center;
    align-items: center;
    &-l {
      font-size:20px;
      font-family:Microsoft YaHei;
      font-weight:bold;
      color:#333;
      margin-right: 10px;
    }
    &-r {
      display: flex;
      align-items: center;
      .checked {
        color: #27BFA3;
        .dot {
          position: relative;
          border: 1px solid #27BFA3 !important;
          span {
            display: block;
            width: 12px;
            height: 12px;
            background: #27BFA3;
            border-radius: 6px;
            margin-left: 5px;
            margin-top: 5px;
          }
        }
      }
      &-item {
        font-size:20px;
        font-family:Microsoft YaHei;
        font-weight:400;
        color: #999;
                  
        .dot {
          display: inline-block;
          width: 24px;
          height: 24px;
          border: 1px solid #999;
          border-radius: 12px;
          margin-right: 10px;
          vertical-align: middle;
          cursor: pointer;
        }
        &:first-child {
          margin-right: 20px;
        }
      }
    }
  }
.btn {
  width: calc(100% - 40px);
  height: 70px;
  line-height:70px;
  text-align: center;
  font-size:24px;
  font-family:Microsoft YaHei;
  font-weight:400;
  color: #fff;
  background:linear-gradient(360deg,rgba(71,203,179,1) 0%,rgba(81,211,176,1) 100%);
  box-shadow:0px 5px 10px rgba(59,201,164,0.3);
  background: #3BC9A4;
  border-radius: 10px;
  margin: 20px auto 0;
  cursor: pointer;
  &:hover {
    background: linear-gradient(180deg, #07E6AA 0%, #21D6B5 100%);
    box-shadow: 0px 3px 6px rgba(23, 178, 145, 0.4);
    }
  }
}
.upload-pic {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  
}
.upload {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  .upload-icon {
    display: block;
    width: 110px;
    height: 110px;
  }
  .tips {
    font-size:24px;
    font-family:Microsoft YaHei;
    font-weight:400;
    color: #2496EF;
    text-align: center;
    margin-top: -20px;
  }
}
  .yxp-upload-code {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    width: 500px;
    height: 633px;
    background: url(../../../assets/composition/upload-code.png) no-repeat;
    background-size: 100% 100%;
    z-index: 1200;
    .close {
      position: absolute;
      right:20px;
      top: 123px;
      width: 20px;
      height: 20px;
      cursor: pointer;
    }
    .code {
      width: 400px;
      height: 400px;
      border-radius: 20px;
      margin: 183px 50px 50px;
      img {
        width: 360px;
        height:360px;
        margin: 20px auto;
      }
    }
  }
</style>
